<!-- 到期提醒 -->
<template>
   <div class="container">
      <el-table
         :data="tableData"
         style="width: 100%; margin-bottom: 20px"
         row-key="id"
         height="750"
         border
         :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column
            type="index"
            width="50"
            label="序号"
         ></el-table-column>
         <el-table-column label="机构名称" prop="organizationName" />
         <el-table-column label="账号ID" prop="accountNumber" />
         <el-table-column label="到期时间" prop="expireTime" />
         <el-table-column label="联系人" prop="linkman" />
         <el-table-column label="联系电话" prop="linkmanPhone" />
      </el-table>
      <el-pagination
         class="controlBox"
         style="margin-top:20px"
         background 
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[5, 10, 20, 40]" 
         :page-size="pagesize"         
         layout="total, sizes, prev, pager, next, jumper"
         :total="tableData.length">    
      </el-pagination>
   </div>
</template>

<script>
export default {
   components: {},
   data() {
      return {
         currentPage:1,  //  初始页
         pagesize:10,    //  每页的数据
         tableData: [
            {
               id: "12987122",
               organizationName: "ws234",
               state: "故障",
               expireTime: "2020-2-22",
               linkman: "萧蔷",
               linkmanPhone: "1352463157",
               accountNumber: "10333",
            },
            {
               id: "12987121",
               organizationName: "ws234",
               state: "故障",
               expireTime: "2020-2-22",
               linkman: "萧蔷",
               linkmanPhone: "1352463157",
               accountNumber: "10333",
            },
            {
               id: "12987126",
               organizationName: "ws234",
               state: "故障",
               expireTime: "2020-2-22",
               linkman: "萧蔷",
               linkmanPhone: "1352463157",
               accountNumber: "10333",
            },
         ],
      };
   },
   methods: {
         // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
         this.pagesize = size;
         console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
         this.currentPage = currentPage;
         console.log(this.currentPage)  //点击第几页
      },
   },
   computed: {},
   watch: {},
   created() {},
   mounted() {},
   updated() {}, // 生命周期 - 更新之后
   beforeDestroy() {}, // 生命周期 - 销毁之前
   destroyed() {}, // 生命周期 - 销毁完成
   activated() {},
};
</script>

<style lang='scss' scoped>
.container{
   padding: 20px;
}
</style>
